<template>
    <div class="page-bg an-collect">
        <van-nav-bar
            title="我的收藏"
            left-text=""
            right-text=""
            left-arrow
            :fixed="true"
            @click-left="clickBack"
            />

        <van-list
        v-if="list.length>0"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-row gutter="15" class="an-goods">
            <van-col span="12" >
                <div v-for="(item,index) in list" :key="item.id">
                    <goods-card v-if="index%2 ==0" class="an-bot" :goods="item.goods" :isCollect="true" @update-list="getList(1)"></goods-card>
                </div>
            </van-col>
            <van-col span="12" >
                <div v-for="(item,index) in list" :key="item.id">
                    <goods-card v-if="index%2 !== 0" class="an-bot" :goods="item.goods" :isCollect="true" @update-list="getList(1)"></goods-card>
                </div>
            </van-col>
        </van-row>
      </van-list>

      <van-empty v-else description="暂无数据" />

    </div>
</template>

<script>
import { mapState } from "vuex";
import GoodsCard from "@/components/GoodsCard/GoodsCard.vue";
export default {
  components:{GoodsCard},
  data() {
    return{
      list:[],
      loading: false,
      finished: false,
      getData:{
        page:1,
        pageSize:10,
        userID:'',
        isCollect: 1 // 查收藏
      },
      total:0
    };
  },
  computed: {
    ...mapState(['userInfo','isLogin'])
  },
  created() {
    this.getList(1);
  },
  methods:{

    // 查询列表
    getList(page) {
      if(page) {
        this.getData.page = page;
      }
      if(page==1) {
        this.list = [];
      }
      this.getData.userID = this.userInfo.id;
      this.$api.getCart(this.getData).then(res => {
        this.loading = false;
        this.list = [...res.records, ...this.list];
        this.total = res.total;
        // 判断是否存在下一页数据
        if(this.total <= this.getData.page * this.getData.pageSize) {
          this.finished = true;
        }
      });
    },

    clickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.an-collect{
    padding-top:46px;
    .an-goods{
        padding:15px;
    }
    .an-bot{
      margin-bottom: 15px;
    }
}
</style>